<template>
	<view>
		<!-- 头部导航栏 -->
		<view style="display: flex;justify-content: space-between;align-items: center;padding: 18rpx 20rpx">
			<view style="display: flex;" @click="back">
				<u-icon name="arrow-left"></u-icon>
				<view>返回</view>
			</view>
			
			<view @click="setting" style="display: flex;align-items: center;;padding: 20rpx 25rpx;margin: 0 10rpx;border-radius: 10rpx;box-shadow: 0 0 14px 0 #66666635;border: solid 1rpx #ddd;">
				<u-icon name="setting"></u-icon>
				<view style="margin-left: 10rpx;">
					公众号设置
				</view>
			</view>
		</view>
		
		<view style="display: flex;margin: 20rpx;justify-content: space-around;">
			<view style="border-radius: 8rpx;box-shadow: 0 0 14px 0 #00000025;padding: 20rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;">
				<view style="font-weight: bold;font-size: 16px;padding: 5px;">
					8
				</view>
				<view style="color: #888;">
					今日发布
				</view>
			</view>
			
			<view style="border-radius: 8rpx;box-shadow: 0 0 14px 0 #00000025;padding: 20rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;">
				<view style="font-weight: bold;font-size: 16px;padding: 5px;">
					26
				</view>
				<view style="color: #888;">
					有效活动
				</view>
			</view>
			
			<view style="border-radius: 8rpx;box-shadow: 0 0 14px 0 #00000025;padding: 20rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;">
				<view style="font-weight: bold;font-size: 16px;padding: 5px;">
					134
				</view>
				<view style="color: #888;">
					图文消息
				</view>
			</view>
			
			<view style="border-radius: 8rpx;box-shadow: 0 0 14px 0 #00000025;padding: 20rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;">
				<view style="font-weight: bold;font-size: 16px;padding: 5px;">
					634
				</view>
				<view style="color: #888;">
					总发布数
				</view>
			</view>
		</view>
		
		<view style="margin: 20rpx;padding: 20rpx;display: flex;">
			<view @click="onNewsManager" style="flex: 1;border-radius: 10rpx;margin: 0 20rpx;padding:20rpx;box-shadow: 0 0 14px 0 #66666643;display: flex;justify-content: center;align-items: center;">
				消息模板管理
			</view>
			<view @click="onPostManager" style="flex: 1;border-radius: 10rpx;margin: 0 20rpx;padding:20rpx;box-shadow: 0 0 14px 0 #66666643;display: flex;justify-content: center;align-items: center;">
				图文内容管理
			</view>
		</view>
		
		<view v-for="office in offices"  style="margin: 20rpx;padding: 20rpx;border-radius: 10rpx;box-shadow: 0 0 14px 0 #66666643;">
			<view @click="onSetting(office)" style="display: flex;padding: 20rpx;justify-content: space-between;align-items: center;">
				<view style="display: flex;">
					<view style="width: 100rpx;height: 100rpx;">
						<image mode="widthFix" :src="office.icon_url"></image>
					</view>
					<view style="display: flex;flex-direction: column;padding-left: 10rpx;">
						<view style="font-weight: bold;font-size: 16px;">{{office.name}}({{office.type == 'service'?'订阅号': '测试号'}})</view>
						<view style="margin: 10rpx 0;color: #888;">appID:{{office.app_id}}</view>
					</view>
				</view>
				
				<view></view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			
			<view style="display: flex;justify-content: space-between;padding: 20rpx;border-top: solid 1rpx #eee;">
				<view>最后群发: {{office.last_datetime?$dayjs(office.last_datetime).format('YYYY-MM-DD HH:mm'):'无'}}</view>
				<view style="display: flex;"> 今日次数: {{office.send_count}} </view>
			</view>
			
			<!-- <view style="display: flex;justify-content: space-between;padding: 20rpx;border-top: solid 1rpx #eee;justify-content: space-around;">
				<view style="">
					<view style="display: flex;flex-direction: column;align-items: center;">
						<view style="font-size: 16px;font-weight: bold">
							12342
						</view>
						<view style="color: #888;">
							浏览
						</view>
					</view>
				</view>
				
				<view style="">
					<view style="display: flex;flex-direction: column;align-items: center;">
						<view style="font-size: 16px;font-weight: bold">
							4232
						</view>
						<view style="color: #888;">
							阅读
						</view>
					</view>
				</view>
				
				<view style="">
					<view style="display: flex;flex-direction: column;align-items: center;">
						<view style="font-size: 16px;font-weight: bold">
							423
						</view>
						<view style="color: #888;">
							转发
						</view>
					</view>
				</view>
			</view> -->
			
			<view  style="display: flex;justify-content: space-around;">
				<view  @click="onClick(office)" style="width: 120px;text-align: center;background-color:white ;color: #00c210;border-radius: 10rpx;box-shadow: 0 0 14px 0 #00c21034;padding:20rpx 20rpx;margin: 20rpx 0;">
					群发记录
				</view>
				<view @click="onSendOfficeMsg(office)" style="width: 120px;text-align: center;background-color:#00c210;color: white;border-radius: 10rpx;box-shadow: 0 0 14px 0 #00c21034;padding:20rpx 30rpx;margin: 20rpx 0;">
					群发消息
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				offices:[]
			}
		},
		onShow(){
			this.uploadAccountList()
		},
		methods: {
			async uploadAccountList(){
				const res = await this.$http.get('/common/wx/accounts')
				
				this.offices = res.data
			},
			setting(){
				uni.navigateTo({
					url: 'office-monitor/office-setting'
				})
			},
			onNewsManager(office){
				uni.navigateTo({
					url:`/pages/job/publish/job-offices/news-manager/news-manager`
				})
			},
			onPostManager(office){
				uni.navigateTo({
					url:`/pages/job/publish/job-offices/post-manager/post-manager`
				})
			},
			onClick(office){
				console.log(office)  
				uni.navigateTo({
					url: `/pages/job/publish/job-offices/send-office-msg/news-list-history?office_id=${office.id}`
				})
			},
			onSendOfficeMsg(office){
				// uni.navigateTo({
				// 	url:'/pages/job/publish/job-offices/send-office-msg/send-office-msg'
				// })
				
				uni.navigateTo({
					url:`/pages/job/publish/job-offices/send-office-msg/news-list-to-send?office_id=${office.id}`
				})
			},
			back(){
				uni.navigateBack()
			},
			onSetting(office){
				console.log(office)
				var url = `/pages/job/publish/job-offices/office-monitor/office-modify-form?office_id=${office.id}`
				console.log(url)
				//uni.navigateTo({url})
				this.$Router.push(url)
			}
		}
	}
</script>

<style>

</style>
